<template>
  <div class="role-view">
    <!-- 表格 -->
      <el-input type="text" v-model="input2" class="input222" placeholder="请输入内容" prefix-icon="el-icon-search">

      </el-input>
    <el-table :data="roleData" style="width: 100%" border stripe :header-cell-style="{ color: '#409eff' }">
      <el-table-column label="用户名" width="100px" align="center" prop="name"/>
      <el-table-column label="用户密码" width="219px" align="center" prop="password"/>
      <el-table-column label="用户头像" width="260px" align="center" prop="sculp"/>
      <el-table-column label="用户b币数" width="190px" align="center" prop="bbi"/>
      <el-table-column label="用户等级" width="190px" align="center" prop="grade"/>
      <el-table-column label="用户当前经验" width="200px" align="center" prop="through"/>
      <el-table-column label="操作" width="198px" align="center" prop="through" >
        <template>
          <el-button type="primary" plain icon="el-icon-edit" >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Role",
  data() {
    return {
      input2: '',
      roleData: [
        { name: '李狗', password: 123123, sculp: 11, bbi: 10, grade: 3,  through: 55550},
        { name: '马特', password: 123123, sculp: 11, bbi: 14, grade: 6,  through: 66660},
        { name: '曹操', password: 123123, sculp: 11, bbi: 18, grade: 5,  through: 77770},
        { name: '贝利', password: 123123, sculp: 11, bbi: 20, grade: 6,  through: 88880},
        { name: '理查', password: 123123, sculp: 11, bbi: 111, grade: 9,  through: 99990},
        { name: '孙武', password: 123123, sculp: 11, bbi: 135, grade: 12,  through: 99990},
      ]
    }
  }
};
</script>

<style lang="scss" scoped>
.role-view {
  margin: 20px 0px 0px 20px;
}

.input222 {
   width: 20%;
}
</style>
